import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { IProps, IState } from './schemas'
import './index.scss'

export default class extends Component<IProps, IState> {
    render() {
        const { avatar } = this.props
        console.log(avatar, 123)
        return (
            <View className='avatar'>
                <View className='cell' style={{ left: Taro.pxTransform(-20), zIndex: 1 }}>
                    <Image src='https://via.placeholder.com/160' className='image' mode='widthFix' />
                </View>
                <View className='cell' style={{ left: Taro.pxTransform(-20 * 3), zIndex: 2 }}>
                    <Image src='https://via.placeholder.com/160' className='image' mode='widthFix' />
                </View>
                <View className='cell' style={{ left: Taro.pxTransform(-20 * 5), zIndex: 3 }}>
                    <Image src='https://via.placeholder.com/160' className='image' mode='widthFix' />
                </View>
                <View className='cell' style={{ left: Taro.pxTransform(-20 * 7), zIndex: 4 }}>
                    <Image src='https://via.placeholder.com/160' className='image' mode='widthFix' />
                </View>
                <View className='cell' style={{ left: Taro.pxTransform(-20 * 9), zIndex: 5 }}>
                    <Image src='https://via.placeholder.com/160' className='image' mode='widthFix' />
                </View>
                <View className='cell' style={{ left: Taro.pxTransform(-20 * 11), zIndex: 6 }}>
                    <Image src='https://via.placeholder.com/160' className='image' mode='widthFix' />
                </View>
                <View className='cell' style={{ left: Taro.pxTransform(-20 * 13), zIndex: 7 }}>
                    <Image src='https://via.placeholder.com/160' className='image' mode='widthFix' />
                </View>
            </View>
        )
    }
}